import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button, Tabs, Affix, Tag } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import { queryPostList, queryTopic } from '~/api/qa-api'
import WaitingList from './container/waiting-list'
import MovedList from './container/moved-list'
import { ItemWrapper, RightItemWrapper } from './styled'
import RichTextModal from '../rich-text-modal'

const { TabPane } = Tabs

const ExtraCotent = ({ form, onFinish, topicData }: any) => (
  <>
    <RightItemWrapper>
      <ItemWrapper>
        <span>未回数: </span>
        <Tag style={{ marginLeft: 5, borderRadius: '100%' }} color="#3370da">
          {topicData?.noReplyPostCount}
        </Tag>
      </ItemWrapper>
      <ItemWrapper>
        <span>主帖数: </span>
        <Tag style={{ marginLeft: 5, borderRadius: '100%' }} color="#3370da">
          {topicData?.postCount}
        </Tag>
      </ItemWrapper>
      <ItemWrapper>
        <span>点击数: </span>
        <Tag style={{ marginLeft: 5, borderRadius: '100%' }} color="#3370da">
          {topicData?.clickCount}
        </Tag>
      </ItemWrapper>
      <ItemWrapper>
        <span>跟帖数: </span>
        <Tag style={{ marginLeft: 5, borderRadius: '100%' }} color="#3370da">
          {topicData?.replyCount}
        </Tag>
      </ItemWrapper>
      <Form style={{ marginLeft: 10 }} validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
        <Form.Item name="createUserName" label="">
          <Input placeholder="标题部门发帖人回复人" />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            查询
          </Button>
        </Form.Item>
      </Form>
    </RightItemWrapper>
  </>
)

const Home: FC = () => {
  const [form] = Form.useForm()
  const [waitList, setWaitList] = useState([])
  const [movedList, setMovedList] = useState([])
  const [visible, setVisible] = useState(false)
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()
  const [notifyVisible, setNotifyVisible] = useState(false)
  const [topicData, setTopicData] = useState<any>()
  const { activeKey = '1' } = state || { activeKey: '1' }

  console.log('activeKey', activeKey)

  const fetchQueryPostList = async (formValue: any) => {
    const { data } = await queryPostList({ ...formValue, isEssential: activeKey === '1' ? 0 : 1 })
    const newData = data.map((item: any, index: number) => {
      return { ...item, rank: index }
    })
    setWaitList(newData)
  }

  const handleGetQueryWaitList = async () => {
    fetchQueryPostList({})
    const result: any = await queryTopic()
    setTopicData(result.data)
  }

  // const handleGetQueryMoveList = async (params: QueryListProps) => {
  //   const userInfo = getUserInfo()
  //   const { data } = await queryBorrowedList({
  //     ...userInfo,
  //     caseName: params.caseName === '' ? null : params.caseName,
  //     caseNo: params.caseNo === '' ? null : params.caseNo
  //   })
  //   setMovedList(data)
  // }

  const onFinish = (val: any) => {
    const formValue = val.createUserName
      ? {
          queryParma: val.createUserName
        }
      : {}
    fetchQueryPostList(formValue)
    // handleGetQueryMoveList(val)
  }

  const handleInitData = () => {
    handleGetQueryWaitList()
    // handleGetQueryMoveList({})
  }

  useEffect(() => {
    handleInitData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeKey])

  return (
    <div>
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
          tabBarExtraContent={<ExtraCotent topicData={topicData} form={form} onFinish={onFinish} />}
        >
          <TabPane tab={<span>普通帖</span>} key="1">
            <WaitingList handleGetQueryWaitList={handleGetQueryWaitList} waitList={waitList} />
          </TabPane>
          <TabPane tab={<span>精华帖</span>} key="2">
            <MovedList handleGetQueryWaitList={handleGetQueryWaitList} waitList={waitList} />
          </TabPane>
        </Tabs>
        <Affix style={{ position: 'fixed', top: 500, right: 0 }} offsetTop={10}>
          <Button
            onClick={() => {
              document.getElementById('top')?.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
            }}
            type="primary"
            style={{ background: '#3370da' }}
          >
            返回顶部
          </Button>
        </Affix>
        <br />
        <br />
        <Affix style={{ position: 'fixed', top: 550, right: 0 }}>
          <Button
            type="primary"
            onClick={() => {
              setVisible(true)
            }}
            style={{ background: '#3370da' }}
          >
            我要发帖
          </Button>
        </Affix>
        <br />
      </main>
      <RichTextModal
        visible={visible}
        onCancel={() => {
          setVisible(false)
        }}
        form={form}
        isPost={true}
        fetchQueryPostList={fetchQueryPostList}
      />
      {/* <NotifyModal
        visible={notifyVisible}
        list={notifyList}
        onCancel={() => {
          setNotifyVisible(false)
        }}
      /> */}
    </div>
  )
}

export default Home
